 <!--
* description: 主损件名称
* author: wangjuan
* createdDate:
-->
<template>
  <el-dialog
    v-dialogDrag
    :title="topName"
    :visible="popupsVisible"
    :append-to-body="true"
    width="70%"
    center
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader
      slot="title"
      :title="topName"
      :style-type="$store.state.app.dialogType"
    />

    <one-table-template
      ref="multipleTable"
      :dynamic-api-config="apiConfig"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-table-defult-height="300"
      :dynamic-is-show-more-btn="false"
      :dynamic-is-show-select="false"
      :callback-obj="callbackObj"
    />
  </el-dialog>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import Vue from "vue";
import { orgApis } from "@/api/caseManagementQuery";

export default {
  name: "VIN",

  components: {
    OneTableTemplate,
    dialogHeader: () => import("@/components/dialogHeader"), // 弹窗标题,
  },

  mixins: [oneTableWithViewTemplateMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    code: { type: String, default: "" },
    comType: { type: String, default: "" },
    codeField: { type: String, default: "" },
    popupsKey: { type: String, default: "" },
    isMul: { type: Boolean, default: true },
    validrule: {
      type: Object,
      default: () => {},
    },
  },

  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ""],
      function () {
        next();
      }
    );
  },

  data() {
    const viewPageCode = this.$route.path;

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);

    return {
      topName: "主损件选择",

      // 网格查询API配置对象
      apiConfig: orgApis.findMainPartCode,

      // 动态组件-按钮
      tableButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
              {
                compKey: "btnKey1",
                type: "primary",
                size: "small",
                name: "search",
                clickEvent: () => this.queryTable(1),
                text: this.$t("sys.button.query"),
                position: "right",
                fuzzySearch: true,
              },
              {
                compKey: "btnKey2",
                size: "small",
                name: "reset",
                clickEvent: this.reset,
                text: this.$t("sys.button.reset"),
                position: "right",
              },
            ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .tableComponents
          : [
              {
                compKey: "compKey1",
                labelName: "主损件名称",
                codeField: "PartName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
              {
                compKey: "compKey2",
                labelName: "备件编码",
                codeField: "partNo",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
            ],

      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
              {
                prop: "PartName",
                label: "备件名称",
                width: 140,
              },
              {
                prop: "partNo",
                label: "备件编码",
              },
            ],

      formField: this.$utils.getFormField(
        this,
        {
          PartName: "",
          partNo: "",
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),

      callbackObj: {
        onRowDbClick: (row, column, event) => {
          this.sendCode(row);
        },
      },
    };
  },

  methods: {
    sendCode(row) {
      // 获取嵌套组件的选中的值
      this.$emit("selectData", row);
      this.closeEdit();
    },

    // 关闭弹窗
    closeEdit(type) {
      this.$emit("close", type);
    },
  },
};
</script>
